﻿@{
    ViewBag.CurrentMenu = "Role";
}

<div class="breadcrumbs ace-save-state" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="~/Home/Index">首页</a>
        </li>
        <li>
            <a href="#">系统管理</a>
        </li>
        <li class="active">角色管理</li>
    </ul>

</div>



<div class="row">

    <div class="col-xs-12">
        <div class="col-md-9">
            <h3 class="row header smaller lighter blue">
                <dic class="col-sm-7">

                </dic><!-- /.col -->
                <dic class="col-sm-5">
                    <label class="pull-right inline">
                        <button id="btnAdd" class="btn btn-sm btn-primary" type="button" data-original-title="新增角色" data-toggle="tooltip" data-widget="">
                            <i class="fa fa-plus-square"></i>&nbsp;&nbsp;新增
                        </button>

                        <button id="btnEdit" class="btn btn-sm btn-primary" type="button" data-original-title="编辑角色" data-toggle="tooltip" data-widget="">
                            <i class="fa fa-edit"></i>&nbsp;&nbsp;编辑
                        </button>
                        <button id="btnDelete" title="" class="btn btn-sm btn-danger" type="button" data-original-title="删除角色" data-toggle="tooltip" data-widget="">
                            <i class="fa fa-times"></i>&nbsp;&nbsp;删除
                        </button>

                    </label>
                </dic><!-- /.col -->
            </h3>
            <table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="sample_2_info">
                <thead>
                    <tr role="row">
                        <th class="table-checkbox" style="width:40px;text-align:center;"><input id="checkAll" class="group-checkable" type="checkbox"></th>
                        <th tabindex="0" aria-label="">
                            角色编号
                        </th>
                        <th tabindex="0" aria-label="">
                            角色名称
                        </th>
                        <th tabindex="0" aria-label="">
                            角色描述
                        </th>
                        @*<th tabindex="0" style="width: 230px;" aria-label="">
                        操作
                    </th>*@
                    </tr>
                </thead>
                <tbody id="tableBody"></tbody>
            </table>
            <div id="grid_paging_part" style="margin:5px 0 5px 0;"></div>

        </div>
        <div class="col-md-3" >
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">功能权限</h3>
                    <div class="pull-right box-tools">
                        <button id="btnSavePermission" class="btn btn-sm btn-primary" type="button" data-original-title="保存" data-toggle="tooltip" data-widget="">
                            <i class="fa fa-save"></i>&nbsp;&nbsp;保存
                        </button>
                    </div>
                </div>
                <div class="box-body" style="max-height:800px;overflow:auto;">
                    <div id="treeDiv" class="portlet-body">
                    </div>
                </div>
            </div>
        </div>
    </div>


    
</div>
@Html.Partial("Edit")
<script>
    var selectedRole = 0;
    $(function () {
        $(document).attr("title", "角色");
        $("#btnAdd").click(function () { Add(); });
        $("#btnDelete").click(function () { DeleteMulti(this); });
        $("#btnSave").click(function () { Save(this); });
        $("#btnEdit").click(function () { Edit(this); });
        $("#btnSavePermission").click(function () { SavePermission(this); });
        $("#checkAll").click(function () { CheckAll(this) });

        $(document).delegate("#tableBody tr", "click", function () { 
            $("#tableBody tr").removeAttr("style");
            $(this).attr("style", "background-color:#B3E9F7");
            selectedRole = $(this).find("input").val();
            LoadPermissionByRole(selectedRole);
        })
        InitTree();
        LoadTables(1, 50);
    });
    //加载树
    function InitTree() {
        $.jstree.destroy();
        AjaxData("/Menus/GetMenuTreeData?_t=" + new Date().getTime(), "", "Get", "", function (d) {

            if (undefined != d && d.success) {

                $('#treeDiv').jstree({       //创建JsTtree
                    'core': {
                        'data': d.data,        //绑定JsTree数据
                        "multiple": true    //是否多选
                    },
                    "plugins": [
                        "types",
                        "wholerow",
                        "checkbox"],  //配置信息
                    "checkbox": {
                        "keep_selected_style": false,
                        "three_state": false

                    }
                })
                $("#treeDiv").on("ready.jstree", function (e, data) {   //树创建完成事件
                    data.instance.open_all();    //展开所有节点
                });
            } else { 

                layer.alert(d.message);
            }
         });
    }
    //加载列表数据
    function LoadTables(startPage, pageSize) {
        $("#tableBody").html("");
        $("#checkAll").prop("checked", false);
        AjaxData("/Role/GetAllPageList?startPage=" + startPage + "&pageSize=" + pageSize + "&_t=" + new Date().getTime(), "", "Get", "", function (d) { 
            if (undefined != d && d.success) {
                var dd = d.data;
                $.each(dd.data, function (i, item) {
                    var tr = "<tr>";
                    tr += "<td align='center'><input type='checkbox' class='checkboxs' value='" + item.id + "'/></td>";
                    tr += "<td>" + (item.code == null ? "" : item.code) + "</td>";
                    tr += "<td>" + item.name + "</td>";
                    tr += "<td>" + (item.remarks == null ? "" : item.remarks) + "</td>";
                    //tr += "<td><button class='btn btn-info btn-xs' href='javascript:;' onclick='Edit(\"" + item.id + "\")'><i class='fa fa-edit'></i> 编辑 </button> </td>";
                    tr += "</tr>";
                    $("#tableBody").append(tr);
                })
                var elment = $("#grid_paging_part"); //分页插件的容器id
                $("#grid_paging_part").lagerPaper({
                    currentIndex: dd.pageIndex,
                    pageSize: pageSize,
                    totalCount: dd.allCount,
                    pageCount: dd.pageCount,
                    onPageChanged: function (e, pageIndex) {

                        LoadTables(pageIndex, 10);
                    }
                });
                
            }

        })
    }
    //全选
    function CheckAll(obj) {
        $(".checkboxs").each(function () {
            if (obj.checked == true) {
                $(this).prop("checked", true)

            }
            if (obj.checked == false) {
                $(this).prop("checked", false)
            }
        });
    };
    //新增
    function Add() {
        $("#Id").val(-1);
        $("#Code").val("");
        $("#Name").val("");
        $("#Remarks").val("");
        $("#Title").text("新增角色");


        var dialog = $("#editModal").removeClass('hide').dialog({
            modal: true,
            title: '编辑功能',
            title_html: false,
            width: 650,
            height: 350

        });


       
    };
    //编辑
    function Edit(selector) {
        var ids = [];
        $(".checkboxs").each(function () {
            if ($(this).prop("checked") == true) {
                ids.push($(this).val());
            }
        });
        if (ids.length == 0) {
            layer.tips("请选择要编辑的记录", selector);
            return;
        };
        if (ids.length > 1) {
            layer.tips("不能同时编辑多条记录", selector);
            return;
        }


        AjaxData("/Role/Get?id=" + ids[0] + "&_t=" + new Date().getTime(), "", "Get", "", function (d) {
            if (undefined != d && d.success) {
                var dialog = $("#editModal").removeClass('hide').dialog({
                    modal: true,
                    title: '编辑功能',
                    title_html: false,
                    width: 650,
                    height: 350

                });


                $("#Id").val(d.data.id);
                $("#Name").val(d.data.name);
                $("#Code").val(d.data.code);
                $("#Remarks").val(d.data.remarks);

                $("#Title").text("编辑角色")

            } else { 

                layer.alert(d.message);
            }

        });
       
    };
    //保存
    function Save(selector) {
        var postData = { "dto": { "Id": $("#Id").val(), "Name": $("#Name").val(), "Code": $("#Code").val(), "Remarks": $("#Remarks").val() } };


        AjaxData("/Role/Edit", postData, "Post", selector, function (d) { 

            if (undefined != d && d.success) { 

                LoadTables(1, 50);
                $(".ui-dialog-titlebar-close").trigger("click");
            } else {
                layer.tips(d.message, "#btnSave");
            };
        });
       
    };
    //批量删除
    function DeleteMulti(selector) {
        var ids = "";
        $(".checkboxs").each(function () {
            if ($(this).prop("checked") == true) {
                ids += $(this).val() + ","
            }
        });
        ids = ids.substring(0, ids.length - 1);
        if (ids.length == 0) {
            layer.alert("请选择要删除的记录。");
            return;
        };
        //询问框
        layer.confirm("您确认删除选定的记录吗？", {
            btn: ["确定", "取消"]
        }, function () {
            var sendData = { "ids": ids };
            AjaxData("/Role/DeleteMuti", sendData, "Post", selector, function (d) {
                if (undefined != d && d.success) {

                    LoadTables(1, 50);
                    layer.closeAll();
                } else { 

                    layer.alert(d.message);
                }
            });
            
        });
    };

    //保存角色权限关联关系
    function SavePermission(selector) {
        if (selectedRole == 0) {
            layer.alert("请选择角色。");
            return;
        }
        var checkedMenu = $('#treeDiv').jstree().get_checked(true);
        var permissions = [];
        $.each(checkedMenu, function (i, item) {
            permissions.push({ "RoleId": selectedRole, "MenuId": item.id });
        })

        AjaxData("/Role/SavePermission", { "roleId": selectedRole, "roleMenus": permissions }, "POST", selector, function (d) { 

            if (undefined != d && d.success) {

                layer.alert("保存成功！");
            } else { 

                layer.alert("保存失败！");
            }
        });
    };
    //根据选中角色加载功能权限
    function LoadPermissionByRole(selectedRole) {

        AjaxData("/Role/GetMenusByRole?roleId=" + selectedRole + "&_t=" + new Date().getTime(), "", "Get", "", function (d) { 
            $("#treeDiv").find("li").each(function () {
                $("#treeDiv").jstree("uncheck_node", $(this));
                if (d.data.indexOf(parseInt($(this).attr("id"))) != -1) {
                    $("#treeDiv").jstree("check_node", $(this));
                }
            });

        });
    };


</script>
